import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
import HomeView from "../views/HomeView.vue";

import HomeLayout from "../layouts/HomeLayout.vue";
import ContentLayout from "../layouts/ContentLayout.vue";

const routes = [
  // {
  //   path: "/",
  //   name: "home",
  //   component: HomeView,
  // },
  // {
  //   path: "/about",
  //   name: "about",
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () =>
  //     import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  // },

  {
    path: "/",
    name: "home",
    component: HomeLayout,
    children: [
      {
        path: "",
        name: "homeIndex",
        component: () => import("@/views/home/Index.vue"),
      },
    ],
  },
  {
    path: "/blog",
    name: "blog",
    component: ContentLayout,
    meta: {
      title: "Blog",
      // subTitle: "Blog",
      imgUrl: require("@/assets/image/blog-banner.jpg"),
    },
    children: [
      {
        path: "",
        name: "blogIndex",
        component: () => import("@/views/blog/Index.vue"),
        children: [
          {
            path: "",
            name: "blogList",
            component: () => import("@/views/blog/blog-list.vue"),
          },
        ],
      },
      {
        path: "/blog/detail/:id",
        name: "blogDetail",
        component: () => import("@/views/blog/blog-detail.vue"),
      },
      // {
      //   path: "/blog/detail/:id",
      //   name: "blogDetail",
      //   component: () => import("@/views/blog/Index.vue"),
      // },
    ],
  },
  {
    path: "/project",
    name: "project",
    component: ContentLayout,
    meta: {
      title: "Project",
      // subTitle: "Project",
      imgUrl: require("@/assets/image/project-banner.jpg"),
    },
    children: [
      {
        path: "",
        name: "projectIndex",
        component: () => import("@/views/project/Index.vue"),
        children: [
          {
            path: "/project/:id",
            name: "projectIndex",
            component: () => import("@/views/project/Index.vue"),
          },
        ],
      },
      {
        path: "/project/detail/:id",
        name: "projectDetail",
        component: () => import("@/views/project/project-detail.vue"),
      },
    ],
  },
  {
    path: "/profile",
    name: "profile",
    component: ContentLayout,
    meta: {
      title: "About Us",
      // subTitle: "Profile",
      imgUrl: require("@/assets/image/aboutUs-banner.jpg"),
    },
    children: [
      {
        path: "",
        name: "profileIndex",
        component: () => import("@/views/profile/Index.vue"),
      },
      {
        path: "/profile/contact",
        name: "contact",
        component: () => import("@/views/profile/components/ContactUs.vue"),
      },
    ],
  },
  {
    path: "/service",
    name: "service",
    component: ContentLayout,
    meta: {
      title: "My Service",
      // subTitle: "Service",
    },
    children: [
      {
        path: "",
        name: "serviceIndex",
        component: () => import("@/views/service/Index.vue"),
      },
      {
        path: "/service/detail/:id",
        name: "serviceDetail",
        component: () => import("@/views/service/service-detail.vue"),
      },
    ],
  },
  {
    path: "/product",
    name: "product",
    component: ContentLayout,
    meta: {
      title: "Products",
      // subTitle: "",
      imgUrl: require("@/assets/image/product-banner.jpg"),
    },
    children: [
      {
        path: "",
        name: "productIndex",
        component: () => import("@/views/product/Index.vue"),
      },
      {
        path: "/product/detail/:id",
        name: "productDetail",
        component: () => import("@/views/product/product-detail.vue"),
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  // history: createWebHistory("welons"),
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

// router.afterEach((to, from, next) => {
//   window.scrollTo(0, 0);
// });

// const scrollBehavior = (to, from, savedPosition) => {
//   if (savedPosition) {
//     // savedPosition is only available for popstate navigations.
//     return savedPosition;
//   } else {
//     const position = {};
//     // new navigation.
//     // scroll to anchor by returning the selector
//     // if (to.hash) {
//     //   position.selector = to.hash;
//     // }
//     // check if any matched route config has meta that requires scrolling to top
//     if (to.matched.some((m) => m.meta.scrollToTop)) {
//       // cords will be used if no selector is provided,
//       // or if the selector didn't match any element.
//       position.x = 0;
//       position.y = 0;
//     }
//     // if the returned position is falsy or an empty object,
//     // will retain current scroll position.
//     return position;
//   }
// };

// router.onError((error) => {
//   const pattern = /Loading chunk (\d)+ failed/g;
//   const isChunkLoadFailed = error.message.match(pattern);
//   const targetPath = router.history.pending.fullPath;
//   if (isChunkLoadFailed) {
//     router.replace(targetPath);
//   }
//   // 当捕获到加载模块错误时，重新渲染该目标模块
// });

export default router;
